<template>
  <div :disabled="true" class="btn" :class="`type-${typeMap[props.type]}`">
    <slot>{{ props.btnContent }}</slot>
  </div>
</template>
<script setup lang="ts">
//TODO 禁用状态
type Props = {
  type?: "primary" | "secondary" | "success" | "danger" | "warning";
  btnContent?: String | "按钮";
};
const props = withDefaults(defineProps<Props>(), {
  type: "primary",
  btnContent: "按钮",
});

const typeMap: Record<string, string> = {
  primary: "1",
  secondary: "2",
  success: "3",
  danger: "4",
  warning: "5",
  // info:'6',
  // light:'7',
  // dark:'8'
};
</script>
<style lang="scss" scoped>
.btn {
  color: #fff;
  width: auto;
  display: inline-block;
  border-radius: 4px;
  padding: 6px 16px;
  cursor: pointer;
  & + .btn {
    margin-left: 10px;
  }
}
</style>
